<template>
  <!-- 风控信息-详情 -->
  <div class="">
    <el-dialog
      class="defaultDialog01 DialogRadarArr DialogFenKong"
      :title="title"
      :visible.sync="visibleKey"
      width="1000px"
      append-to-body
    >
      <div class="">
        <!-- 一类 -->
        <div
          class="follow_border"
          style="line-height: 28px; padding-bottom: 10px"
        >
          <el-descriptions
            class="margin-top"
            :title="'用户：' + radarData.apply_report_detail['name']"
            border
            :column="3"
          >
            <el-descriptions-item
              label-class-name="label01"
              :label="followMsg.title"
              v-for="(followMsg, key) in radarArr[0]"
              :key="key"
            >
              <div v-if="radarData.apply_report_detail">
                <el-tag>{{
                  radarData.apply_report_detail[followMsg.key] === "cmc"
                    ? "移动"
                    : radarData.apply_report_detail[followMsg.key] === "cucc"
                    ? "联通"
                    : radarData.apply_report_detail[followMsg.key] === "ctcc"
                    ? "电信"
                    : radarData.apply_report_detail[followMsg.key] || 0
                }}</el-tag>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- 二类-表格 -->
        <div class="erlei_table" style="padding-top: 10px">
          <div class="erlei_ul r_flex" style="font-weight: 600">
            <div class="erlei_li">行为时间</div>
            <div class="erlei_li">贷款笔数</div>
            <div class="erlei_li">贷款金额</div>
            <div class="erlei_li">贷款机构</div>
            <div class="erlei_li">失败扣款笔数</div>
            <div class="erlei_li">履约贷款总金额</div>
            <div class="erlei_li">履约贷款次数</div>
          </div>
          <div class="erlei_ul r_flex">
            <div class="erlei_li">近1个月</div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170002
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170007
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170016
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170035
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170040
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170045
                  : 0
              }}
            </div>
          </div>
          <div class="erlei_ul r_flex">
            <div class="erlei_li">近3个月</div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170003
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170008
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170017
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170036
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170041
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170046
                  : 0
              }}
            </div>
          </div>
          <div class="erlei_ul r_flex">
            <div class="erlei_li">近6个月</div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170004
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170009
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170018
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170037
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170042
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170047
                  : 0
              }}
            </div>
          </div>
          <div class="erlei_ul r_flex">
            <div class="erlei_li">近12个月</div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170005
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170010
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170019
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170038
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170043
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170048
                  : 0
              }}
            </div>
          </div>
          <div class="erlei_ul r_flex">
            <div class="erlei_li">近24个月</div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170006
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170011
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170020
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170039
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170044
                  : 0
              }}
            </div>
            <div class="erlei_li">
              {{
                radarData.behavior_report_detail
                  ? radarData.behavior_report_detail.B22170049
                  : 0
              }}
            </div>
          </div>
        </div>

        <!-- 一类 -->
        <div
          class="follow_border"
          style="line-height: 28px; padding-bottom: 10px"
        >
          <el-descriptions
            class="margin-top"
            border
            title="贷款信息"
            :column="3"
          >
            <el-descriptions-item
              label-class-name="label02"
              :label="followMsg.title"
              v-for="(followMsg, key) in radarArr[1]"
              :key="key"
            >
              <div>
                <el-tag v-if="radarData.behavior_report_detail">{{
                  radarData.behavior_report_detail[followMsg.key]
                }}</el-tag>
                <el-tag v-else>0</el-tag>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 一类 -->
        <div
          class="follow_border"
          style="line-height: 28px; padding-bottom: 10px"
        >
          <el-descriptions
            class="margin-top"
            border
            title="逾期信息"
            :column="3"
          >
            <el-descriptions-item
              label-class-name="label03"
              :label="followMsg.title"
              v-for="(followMsg, key) in radarArr[2]"
              :key="key"
            >
              <div>
                <el-tag v-if="radarData.behavior_report_detail">{{
                  radarData.behavior_report_detail[followMsg.key]
                }}</el-tag>
                <el-tag v-else>0</el-tag>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 一类 -->
        <div
          class="follow_border"
          style="line-height: 28px; padding-bottom: 10px"
        >
          <el-descriptions
            class="margin-top"
            border
            title="其他信息"
            :column="3"
          >
            <el-descriptions-item
              label-class-name="label05"
              :label="followMsg.title"
              v-for="(followMsg, key) in radarArr[3]"
              :key="key"
            >
              <div>
                <el-tag v-if="radarData.current_report_detail">{{
                  radarData.current_report_detail[followMsg.key]
                }}</el-tag>
                <el-tag v-else>0</el-tag>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { cityList } from "@/api/business/city";

export default {
  name: "DialogRadarArr",
  props: {
    title: {
      type: String,
      default: "",
    },
    radarKye: {
      type: Boolean,
      default: false,
    },
    radarArr: {
      type: Array,
      default: () => [[], [], []],
    },
    radarData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      visibleKey: false,
      tableData: [
        {
          date: "近一个月",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  created() {},
  mounted() {
    console.log(this.radarData, "radarData");
  },
  watch: {
    radarKye(data) {
      console.log(data, "data");
      this.visibleKey = data;
    },
  },
  methods: {
    // 选择城市后
    cityChange(data) {
      let newparm = "";
      if (this.multiple) {
        // 双数组遍历 终究无敌简洁优雅版
        newparm = this.cityKey.map(
          (keyID) =>
            this.cityData.filter((value) => {
              if (keyID === value.ccode) {
                return value;
              }
            })[0]
        );
      } else {
        newparm = this.cityData.filter((value) => {
          if (this.cityKey === value.ccode) {
            return value;
          }
        });
      }
      this.$emit("selectCity", newparm);
    },
  },
};
</script>

<style lang="scss">
.Dialog_border {
  padding: 24px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin-bottom: 1px;
}
.erlei_table {
  text-align: center;
  // border: 1px solid #eee;
  padding: 0px 0px 24px 0px;
  .erlei_li {
    font-size: 14px;
    line-height: 44px;
    width: 14.2%;
    flex-shrink: 0;
    flex-grow: 1;
    color: #7d7d7d;
    border-bottom: 1px solid #dcdcdc;
  }
}
.DialogRadarArr .el-descriptions-item__container {
  line-height: 28px;
}

.erlei_ul {
  &:nth-child(1) {
    .erlei_li {
      font-weight: 900;
      color: #333;
      background: #fff !important;
    }
  }

  .erlei_li {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;

    &:nth-child(2n) {
      background: #eff7ff !important;
    }
    &:nth-child(2n-1) {
      background: #f1f7ed !important;
    }
  }
}

.biaoge01 {
  color: #333 !important;
  background: #eff7ff !important;
}

.biaoge02 {
  color: #333 !important;
  background: #f1f7ed !important;
}

.label01 {
  color: #333 !important;
  background: #e3f2fd62 !important;
}

.label02 {
  color: #333 !important;
  background: #ffebee74 !important;
}

.label03 {
  color: #333 !important;
  background: #e0f2f167 !important;
}

.label04 {
  color: #333 !important;
  background: #e1f5fe !important;
}

.label05 {
  color: #333 !important;
  background: #fffde772 !important;
}

.el-descriptions-item__content {
  width: 100px !important;
}
.DialogFenKong .el-descriptions-item__label {
  width: 180px !important;
}
</style>
